<template>
  <div class="home">
<!--    <div class="example-title"> # vue-video-player 播放 RTMP 流 </div>-->
<!--    <RtmpLive class="live"></RtmpLive>-->
<!--    <div class="example-title"> # vue-video-player 播放 HlsLive 流 </div>-->
<!--    <HlsLive></HlsLive>-->
<!--    <div class="example-title"> # vue-video-player 播放 HttpFlv 流 </div>-->
<!--    <HttpFlv class="live"></HttpFlv>-->
<!--    <div class="example-title"> # vue-video-player 播放 Flv 流 </div>-->
    <Flv class="live"></Flv>
  </div>
</template>

<script>
import GithubButton from 'vue-github-button'
import RtmpLive from "@/components/RtmpLive.vue";
import HlsLive from "@/components/HlsLive.vue";
import Flv from "@/components/flv.vue";
import HttpFlv from "@/components/httpFlv.vue";

export default {
  name: "home",
  components: {
    GithubButton,
    RtmpLive,
    HlsLive,
    Flv,
    HttpFlv
  },
  data () {
    return {
      title: 'web 播放视频流/直播',
      subtitle: '使用 vue-video-player、flv.js 播放 RTMP、HLS、HTTP-FLV 视频流',
      videoInfo: [
        { title: 'RTP', videoSrc: 'rtmp://zb.zmzpl.com/live/test'},
      ],
      imgSrc: '', // 图片路径
      canvas: '',
      context: '',
      videoTag: ''
    }
  },
  mounted () {
    // this.videoTag = document.getElementById('videoElement2')
    // this.canvas = document.getElementById('canvas')
    // this.context = this.canvas.getContext('2d')
    // console.log('加载数据：', this.videoTag, this.canvas, this.context)
  },
  methods: {
    captureImg () {
      this.context.drawImage(this.videoTag, 0, 0, 515, 300)
      let base64 = this.canvas.toDataURL('image/jpeg')
      console.log('base64:', base64)
      this.imgSrc = base64
    }
  }
};
</script>

<style lang="less" scoped>

a {
  // color: #42b983;
  color: #fff;
}
a:hover {
  color: #fff;
}
.title {
  height: 1em;
  line-height: 1em;
  font-weight: 700;
  font-size: 4rem;
  margin: 1.5em 0 1.2em;
}
.subtitle {
  font-size: 1.8em;
  color: #a5a5a5;
  margin: 1em 0;
  font-weight: bold;
}
.actions {
  margin-top: 3em;
  margin-bottom: 2em;
}
.example-title {
  font-size: 1.8em;
  font-weight: bold;
  margin-top: 3em;
  margin-bottom: 2em;
}
</style>

